<template>
  <div>
    <!-- 搜索 -->
    <el-card>
      <el-form :inline="true" :model="searchPage" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input
            v-model="searchPage.name"
            placeholder="请输入姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="searchPage.sex" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地址">
          <el-input
            v-model="searchPage.address"
            placeholder="请输入地址"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button type="danger">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 列表 -->
    <el-card>
      <el-button type="primary" @click="changeDialog">添加</el-button>
      <el-table :data="list" style="width: 100%">
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="sex" label="性别"> </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
        <el-table-column prop="relation" label="关系"> </el-table-column>
        <el-table-column prop="birthday" label="出生日期"> </el-table-column>
        <el-table-column prop="idCard" label="身份证号">
          <template  slot-scope="scope">
              <div>{{scope.row.idCard.replace(scope.row.idCard.substr(-4), '****')}}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- <el-button type="text" @click="toDetail(scope.row)">详情</el-button> -->
            <!-- <router-link :to="{name: 'detail', params: {id: scope.row.id}}">详情</router-link> -->
            <router-link :to="{path: `/detail/${scope.row.id}`}">详情</router-link>
            <!-- <router-link :to="{name: 'detail', query: {id: scope.row.id}}">详情</router-link> -->

            <!-- scope.row：当前行的数据 -->
            <el-button type="text" @click="deleteItem(scope.row)"
              >删除</el-button
            >
            <el-button type="text" @click="editItem(scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.current"
        :page-sizes="[5, 10, 15, 20, 50]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </el-card>

    <!-- 添加 / 修改 弹框 -->
    <el-dialog
      :title="ruleForm.id ? '修改' : '添加'"
      :visible="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <!-- form  -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="dialogForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>

        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="ruleForm.idCard"></el-input>
        </el-form-item>

        <el-form-item label="性别" prop="sex">
          <el-select v-model="ruleForm.sex" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="生日" prop="birthday">
          <el-date-picker
            type="date"
            placeholder="生日"
            v-model="ruleForm.birthday"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="关系" prop="relation">
          <el-select v-model="ruleForm.relation" placeholder="请选择关系">
            <el-option label="户主" value="户主"></el-option>
            <el-option label="子女" value="子女"></el-option>
            <el-option label="配偶" value="配偶"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="地址" prop="address" required>
          <el-input v-model="ruleForm.address"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('dialogForm')"
            >添加</el-button
          >
          <el-button @click="handleClose">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { apigetList, apiDeleteItem, apiAddItem } from "@/api";
export default {
  data() {
    return {
      ruleForm: {}, // 添加表单的数据
      rules: {
        name: [
          // 非空校验
          { required: true, message: "请输入姓名", target: "blur" },
        ],
        idCard: [
          // 非空校验
          { required: true, message: "请输入身份证号", target: "blur" },
          { min: 18, message: "身份证号不合法 请重新输入", target: "blur" },
        ],
        sex: [{ required: true, message: "请输选择性别", target: "blur" }],
        birthday: [{ required: true, message: "请输选择生日", target: "blur" }],
        relation: [{ required: true, message: "请输选择关系", target: "blur" }],
        address: [{ required: true, message: "请输输入地址", target: "blur" }],
      }, // 添加表单的验证
      dialogVisible: false,
      list: [],
      searchPage: {}, // 搜集搜索内容
      page: {
        total: 0,
        current: 1, // 当前页码，
        size: 10, // 每页条数
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      // 将分页器和搜索内容同时发送给后端
      apigetList({ ...this.page, ...this.searchPage }).then((res) => {
        this.list = res.data;

        this.page = {
          ...this.page,
          total: res.total,
        };
      });
    },
    // 更改每页条数
    handleSizeChange(e) {
      this.page = {
        ...this.page,
        size: e,
      };

      this.getList();
    },
    // 更改页码
    handleCurrentChange(e) {
      this.page = {
        ...this.page,
        current: e,
      };

      this.getList();
    },
    deleteItem(data) {
      apiDeleteItem({ id: data.id }).then((res) => {
        this.$message({
          type: "success", // success error warning
          message: "删除成功",
        });

        // 重新获取数据
        this.getList();
      });
    },
    // 搜索
    onSearch() {
      this.page = {
        ...this.page,
        current: 1,
      };
      this.getList();
    },
    // 改变弹框的显示与隐藏
    changeDialog() {
      this.dialogVisible = !this.dialogVisible;
    },

    // 添加 / 修改
    submitForm(formName) {
      // formName:ref  form表单的实例  validate：实例上的验证的方法
      this.$refs[formName].validate((valid) => {
        // valid： boolea值： true：表单验证成功， false 表单 验证失败
        if (valid) {
          apiAddItem(this.ruleForm).then((res) => {
            this.changeDialog();

            this.getList();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 关闭 添加和修改的弹框
    handleClose() {
      this.changeDialog();

      // 清空弹框中 输入的内容
      this.ruleForm = {};

      // 重置弹框中的校验
      this.$refs.dialogForm.resetFields();
    },
    // 修改
    editItem(data) {
      // data 修改当前行的数据
      this.ruleForm = {...data};

      // 打开弹框
      this.changeDialog();
    },
    // 跳转详情
    toDetail(data) {
      // params
      // 1.this.$router.push(`/detail/${data.id}`)
      // 页面刷新的时候 会丢失参数
      // 2.this.$router.push({name: 'detail', params: {id: data.id}})

      // query
      // this.$router.push({name: 'detail', query: {id: data.id, name: data.name}})

    }
  },
};
</script>